<script setup lang="ts">

import Card from "@/components/Card.vue";
import Attr from "@/components/Attr.vue";
import Attr2 from "@/components/Attr2.vue";
import AttrOnEvent from "@/components/AttrOnEvent.vue";
import {useMessage} from 'naive-ui';
import AttrAtRoot from "@/components/AttrAtRoot.vue";
const message=useMessage();
function greeting() {
  message.success("hello in parent")
}
</script>

<template>
  <card title="透传 Attributes">
    <p>“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是
      class、style 和 id。</p>
    <attr class="border rounded-3 p-3"/>
  </card>
  <card title="对 class 和 style 的合并">
    <attr2 class="border rounded-3 p-3 shadow"/>
  </card>
  <card title="v-on 监听器继承">
    <attr-on-event @click="greeting"/>
  </card>
  <card title="子组件多个根节点的属性透传">
    <attr-at-root class="bg-danger-subtle"/>
  </card>
</template>

<style scoped>

</style>